import React from "react";
import TaskItem from "./TaskItem";

const TaskList = ({ tasks, onDeleteTask, onToggleTask, onEditTask }) => {
  if (tasks.length === 0) {
    return (
      <div className="text-center py-5">
        <i className="bi bi-inbox display-1 text-muted"></i>
        <p className="text-muted mt-3">暂无任务，添加一个开始吧！</p>
      </div>
    );
  }

  return (
    <div className="mt-4">
      <h5 className="mb-3">
        <i className="bi bi-list-task me-2"></i>
        任务列表
      </h5>
      <div className="list-group">
        {tasks.map((task) => (
          <TaskItem
            key={task.id}
            task={task}
            onDelete={onDeleteTask}
            onToggle={onToggleTask}
            onEdit={onEditTask}
          />
        ))}
      </div>
    </div>
  );
};

export default TaskList;
